import React, { PureComponent } from 'react';
import { message, Alert } from 'antd';
// 引入样式
import './picture.scss';
// 发送axios
import Axios from 'axios';
// 引入接口
import { webSite } from '../../website';
import LazyLd from './LazyLd/LazyLd';
// 壁纸页面
export default class Picture extends PureComponent {
  constructor() {
    super()
    this.state = {
      // 存放图片的数组
      ImgAll: [],
      // 图片的类型
      cla: 'fengjing',
      // 图片的个数
      int: 6
    }
  }
  componentWillUnmount () {
    // 卸载异步操作设置状态
    this.setState = () => {
      return;
    }
  }
  componentDidMount () {
    // 网页加载请求一次风景的壁纸
    this.clickClass('fengjing');
  }
  // 根据分类获取资源
  clickClass = (claIndex) => {
    // 点击提示加载框
    setTimeout(message.loading('壁纸加载中.....', 0), 1000);
    this.setState({
      cla: claIndex
    }, () => {
      // 加载数据
      Axios.create({
        baseURL: `${webSite}:3003`
      }).post("/Picture", { class: claIndex, int: 6 }).then(err => {
        if (err.data.code === 'P0001') {
          this.setState({
            ImgAll: err.data.picture
          })
        }
      }).catch(() => {
        message.error({ content: '网络错误', className: 'bulletChatMessage' });
      })
    })
  }
  // 点击加载更多图片
  clickPictrue = () => {
    let { int, cla } = this.state;
    // 每次加载的时候壁纸数量加 6
    this.setState({
      int: int + 6
    }, () => {
      // 点击提示加载框
      Axios.create({
        baseURL: `${webSite}:3003`
      }).post("/Picture", { class: cla, int: this.state.int }).then(err => {
        if (err.data.code === 'P0001') {
          this.setState({
            ImgAll: err.data.picture
          })
        }
      }).catch(() => {
        message.error({ content: '网络错误', className: 'bulletChatMessage' });
      })
    })
  }
  // 渲染
  render () {
    let { ImgAll } = this.state;
    // 把数组分成两份
    function group (array) {
      let newArray = [];
      let newArrayJI = [];
      let newArrayOU = [];
      for (let index = 0; index < array.length; index++) {
        if (index % 2 === 0) {
          newArrayJI.push(array[index])
        } else {
          newArrayOU.push(array[index])
        }
      }
      newArray.push(newArrayJI)
      newArray.push(newArrayOU)
      return newArray;
    }
    // 分离好的数据
    let arr = group(ImgAll)
    return (
      <div className='Picture' id='PictureId'>
        <ul className='Picture_top'>
          <li style={{ background: `url("${require('./img/p1.jpg')}")` }} onClick={() => this.clickClass('fengjing')}>风景</li>
          <li style={{ background: `url("${require('./img/p2.jpg')}")` }} onClick={() => this.clickClass('dongman')}>动漫</li>
          <li style={{ background: `url("${require('./img/p3.jpg')}")` }} onClick={() => this.clickClass('meizi')}>人物</li>
          <li style={{ background: `url("${require('./img/p4.jpg')}")` }} onClick={() => this.clickClass('suiji')}>随机</li>
        </ul>
        <div className='Picture_body'>
          <div className='Picture_body_left'>
            {
              arr[0] !== undefined ? arr[0].map((list, index) => {
                return <LazyLd width={45} src={list} key={index}></LazyLd>
              }) : ''
            }
          </div>
          <div className='Picture_body_right'>
            {
              arr[1] !== undefined ? arr[1].map((list, index) => {
                return <LazyLd width={45} src={list} key={index}></LazyLd>
              }) : ''
            }
          </div>
        </div>
        <Alert message="加载更多" type="info" onClick={this.clickPictrue} className='alert' />
      </div>
    )
  }
}